<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">

            <div class="btn-group" uib-dropdown>
                <button class="btn btn-primary btn-sm dropdown-toggle" uib-dropdown-toggle type="button">
                    <i class="fa fa-filter"></i>
                    Quick Filters
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li>
                        <a ng-click="$vm.filterByStatus('Open')">Open cases ({{$vm.caseStats.Open.count}})</a>
                    </li>
                    <li>
                        <a ng-click="$vm.filterByStatus('Resolved')">Closed cases ({{$vm.caseStats.Resolved.count}})</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a ng-click="$vm.filterMyOpenCases()">My open cases</a>
                    </li>
                    <li>
                        <a ng-click="$vm.filterMyCases()">My cases</a>
                    </li>                    
                </ul>
            </div>

            <div class="btn-group" uib-dropdown>
                <button class="btn btn-primary btn-sm dropdown-toggle" uib-dropdown-toggle type="button">
                    <i class="fa fa-sort"></i>
                    Sort by
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '-startDate'])">Newest first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '+startDate'])">Oldest first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '-severity'])">High Severity first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '+severity'])">Low Severity first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '+owner'])">Ascendant assignee</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '-owner'])">Descendant assignee</a>
                    </li>
                </ul>
            </div>

            <div class="btn-group pull-right" role="group">
                <page-sizer collection="$vm.list" sizes="[10, 15, 30, 100]"></page-sizer>
            </div>

            <div class="btn-group pull-right" role="group">
                <button class="btn btn-sm" ng-class="{true: 'btn-primary', false:'btn-default'}[$vm.uiSrv.context.showFilters]" type="button" ng-click="$vm.toggleFilters()">
                    <i class="fa fa-search"></i> Filters
                </button>
            </div>

            <div class="btn-group pull-right" role="group">
                <button class="btn btn-sm" ng-class="{true: 'btn-primary', false:'btn-default'}[$vm.uiSrv.context.showStats]" type="button" ng-click="$vm.toggleStats()">
                    <i class="fa fa-bar-chart"></i> Stats
                </button>
            </div>
        </div>
    </div>
</div>
